import {useComponentConfigStore} from "../stores/component-config.tsx";
import {useMemo} from "react";
import {MaterialItem} from "./index.tsx";

const Material = () => {
    const {componentConfig} = useComponentConfigStore()
    const components = useMemo(() => {
        return Object.values(componentConfig).filter((item) => item.name !== 'Page');
    }, [componentConfig]);


    const classifyComponents = useMemo(() => {
        return {
            'basic': components.filter((item) => item.materialType === 'basic'),
            'container': components.filter((item) => item.materialType === 'container'),
            'form': components.filter((item) => item.materialType === 'form'),
        }
    }, [])

    return <div className={'flex flex-wrap h-[100%] overflow-y-scroll'}>
        <div className={'w-full mt-1'}>
            <div className={'text-[20px] py-2 font-bold text-center bg-amber-50'}>表单组件</div>
            <div className={'flex flex-wrap flex-auto px-[5%] justify-between items-center '}>
                {
                    classifyComponents.form.map((item, index) => {
                        return <MaterialItem desc={item.desc} name={item.name} key={item.name + index}/>
                    })
                }
            </div>
        </div>

        <div className={'w-full mt-10'}>
            <div className={'text-[20px] py-2 font-bold text-center bg-amber-50'}>容器组件</div>
            <div className={'flex flex-wrap flex-auto px-[5%] justify-between items-center '}>
                {
                    classifyComponents.container.map((item, index) => {
                        return <MaterialItem desc={item.desc} name={item.name} key={item.name + index}/>
                    })
                }
            </div>
        </div>
        <div className={'w-full mt-10'}>
            <div className={'text-[20px] py-2 font-bold text-center bg-amber-50'}>基础组件</div>
            <div className={'flex flex-wrap flex-auto px-[5%] justify-between items-center '}>
                {
                    classifyComponents.basic.map((item, index) => {
                        return <MaterialItem desc={item.desc} name={item.name} key={item.name + index}/>
                    })
                }
            </div>
        </div>

    </div>
}

export default Material;